<!--
 * @Author: Cenven
 * @Date: 2021-03-17 10:58:02
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-07-02 13:30:39
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <!-- 单选题 -->
  <div class="single-choice-question">
    <div class="answer-type">
      单选题<span v-if="['2', '3'].includes(type)"
        >（{{ detail.score }}分）</span
      >
    </div>
    <div class="answer-question">
      <template v-if="detail.richTextSwitch == 1">
        <p class="question-title" v-html="detail.question.question"></p>
      </template>
      <template v-else>
        <p class="question-title">
          {{ detail.question.question }}
        </p>
      </template>
    </div>
    <div class="answer-box">
      <RadioGroup v-model="user_answer" @on-change="handleChange">
        <Radio
          :label="index + 1"
          :disabled="detail.is_ban_input"
          v-for="(item, index) in detail.question.answer"
          :key="'t1' + index"
          :class="[
            index + 1 === detail.answer && detail.is_show_answer
              ? 'right-answer'
              : '',
            index + 1 === user_answer ? 'active' : ''
          ]"
        >
          <template v-if="detail.richTextSwitch == 1">
            <div class="rich_text_box" v-html="item"></div>
          </template>
          <template v-else>{{ item }}</template>
        </Radio>
      </RadioGroup>
    </div>
    <div class="analysis" v-if="!['1', '2', '3'].includes(type)">
      <span @click="handleShowExplain">查看解析</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["value", "detail", "type"],
  components: {},
  data() {
    return {
      user_answer: ""
    };
  },
  watch: {
    value: {
      handler(new_val, old_val) {
        if (this.user_answer !== new_val) {
          this.user_answer = new_val;
        }
      },
      deep: true
    }
  },
  computed: {
    /* 类型（0章节练习 试卷类型 1专项训练 2模拟考试 3真题训练） */
  },
  methods: {
    handleChange() {
      console.log("单选题");
      this.$emit("input", this.user_answer);
      this.$emit("change", this.user_answer);
    },
    handleShowExplain() {
      this.$emit("handleExplain", this.detail.id);
    }
  },
  created() {
    this.user_answer = this.value;
  },
  activated() {},
  mounted() {}
};
</script>

<style lang="scss">
// 单选题/判断题样式
.single-choice-question {
  background: #fff;
  width: 100%;
  .answer-type {
    font-size: 16px;
    line-height: 24px;
    padding: 20px 0;
  }
  .answer-question {
    .question-title {
      font-size: 16px;
      line-height: 24px;
    }
  }
  .answer-box {
    margin: 12px 0;
    .rich_text_box {
      position: relative;
      left: 26px;
      top: -17px;
    }
    .ivu-radio-wrapper,
    .ivu-checkbox-wrapper {
      font-size: 14px;
      display: block;
    }
    .ivu-radio-wrapper.right-answer {
      .ivu-radio-disabled {
        color: #f39090;
        .ivu-radio-inner {
          // background-color: #f39090;
          border-color: #e56262;
          &::after {
            background-color: #e56262;
            opacity: 1;
            transform: scale(1);
            transition: all 0.2s ease-in-out;
          }
        }
      }
    }
    .ivu-radio-wrapper.active {
      .ivu-radio-disabled {
        color: var(--theme-color);
        .ivu-radio-inner {
          // background-color: var(--theme-color);
          border-color: var(--theme-color-darker);
          &::after {
            background-color: var(--theme-color);
            opacity: 1;
            transform: scale(1);
            transition: all 0.2s ease-in-out;
          }
        }
      }
    }
    .ivu-input {
      font-size: 14px;
    }
    .ivu-radio-wrapper + .ivu-radio-wrapper {
      margin-top: 12px;
    }
    .ivu-input-wrapper + .ivu-input-wrapper {
      margin-top: 12px;
    }
    .ivu-checkbox-wrapper + .ivu-checkbox-wrapper {
      margin-top: 12px;
    }
  }
  .analysis {
    text-align: right;
    color: var(--theme-color);
    cursor: pointer;
    font-size: 16px;
    padding: 30px 20px;
    box-sizing: border-box;
  }
}
</style>
